<template>
  <div>
    <!-- 登陆后 -->
    <div class="page">
    <!-- 头部 -->
    <div class="header"><SysHeader></SysHeader></div>
    <!-- 侧边导航栏 -->
    <div class="slider"><SysSlider/></div>
    <!-- 对应内容区 -->
    <div class="content">
      <!-- 面包屑 -->
      <div class="bread"><SysBread></SysBread></div>
      <!-- 路由展示区 -->
      <div class="showPlace">
        <router-view></router-view>
      </div>
    </div>
  </div>
  </div>
  
</template>

<script>
import SysHeader from '../SysHeader'
import SysSlider from '../SysSlider'
import SysBread from '../SysBread'
export default {
  name: 'App',
  components: {
    SysHeader,
    SysSlider,
    SysBread,
  },
}
</script>

<style lang="less" scoped>
  .slider{
    position: absolute;
    left: 0.5rem;
    bottom: 0.5rem;
    width: 13rem;
    top: 3.5rem;
    background-color: #219a21;
  }
  .content{
    position: absolute;
    left: 13.5rem;
    bottom: 0.5rem;
    right: .5rem;
    top: 3.5rem;
    // background-color: black;
    .bread{
      // background-color: pink;
      padding:1rem;
      font-size:1rem;
      color:rgb(46, 45, 45)
    }
    .showPlace{
      box-sizing: border-box;
      // background-color: skyblue;
      padding: 1rem 3rem 3rem;
      height: 29.87rem;
    }
  }
</style>